@import "../../../static/less/common";

@left_padding: 19px;
@light_bg: #26292E;
@light_bk: #939497;

.chat{
	width: 85%; margin: 0 auto; display: flex; height: 91vh;
	.left{
		width: 25%; background-color: #2E3238; display: flex; flex-direction: column;
		.header{
			height: 61px; display: flex; padding: @left_padding; padding-bottom: 0px; margin-bottom: @left_padding;
			.avatar{
				width: 41px; height: 41px; border-radius: 4px;
			}
			.nick{
				color: #fff; font-size: 1.5em; line-height: 41px; margin-left: .7em;
			}
		}
		.searchbox{
			margin-left: @left_padding; margin-right: @left_padding; height: 34px; background-color: @light_bg; display: flex; align-items: center; font-size: 1.4em; padding: 0 6px; color: @light_bk;
			.glyphicon-search{
				
			}
			.searchInput{
				background-color: transparent; border-width: 0px; font-size: .8em; outline:none; margin-left: 7px; color: #fff; font-weight: bold;
				&::-webkit-input-placeholder{
						color: @light_bk;
						font-size: .7em;
				}
			}
		}
		.tabs{
			height: 45px; margin-left: @left_padding; margin-right: @left_padding; display: flex; align-items: center;
			span{
				color: #fff; flex: 1; font-size: 1.5em; display: flex; justify-content: center; cursor: pointer;
				&:hover, &.current{
					color: @base;
				}
			}
		}
		.tabs_content{
			flex: 1;
			.loadingcontent{ 
				color: @light_bk; margin: 20% 15%; display: flex;
				img{ margin-right: .7em;}
			}
			.userlist{
				.useritem{
					height: 50px; line-height: 50px; cursor: pointer;
					&.current{
						background-color: #3B4047;
					}
					.avatar{
						width: 30px; height: 30px;
					}
					.username{
						color: #fff; font-weight: bold; margin-left: .8em; font-size: 1em;
					}
				}
			}
		}
	}
	.right{
		background-color: #eee; flex: 1;
	}
}
